import {Component, Input, Output} from '@angular/core';
import {NavController, ModalController} from 'ionic-angular';
import {DomSanitizer, SafeStyle} from "@angular/platform-browser";
import {PhotoViewerPage} from "../../pages/photo-viewer/photo-viewer";

/*
 Generated class for the MessageBoard page.

 See http://ionicframework.com/docs/v2/components/#navigation for more info on
 Ionic pages and navigation.
 */
@Component({
  selector: 'img-list',
  templateUrl: 'img-list.html'
})
export class ImgList {


  _imgUrls: Array<string> = [];
  _fluidMode: string = null;

  @Input()
  get fluidMode(): string {
    return this._fluidMode;
  }
  set fluidMode(v) {
    if (v === "")
    {
      this.basis = this.sanitizer.bypassSecurityTrustStyle('calc(33.33% - 4px)');
    }
    this._fluidMode = v;
  }

  @Input()
  get imgUrls()
  {
    if (this.fluidMode !== "")
    {
      if (this._imgUrls.length == 1)
      {
        this.basis = this.sanitizer.bypassSecurityTrustStyle('calc(100% - 4px)');
      }

      else if (this._imgUrls.length <= 4)
      {
        this.basis = this.sanitizer.bypassSecurityTrustStyle('calc(50% - 4px)');
      }
      else
      {
        this.basis = this.sanitizer.bypassSecurityTrustStyle('calc(33.33% - 4px)');
      }
    }

    return this._imgUrls;
  }
  set imgUrls(v: Array<string>)
  {
    this._imgUrls = v;
  }


  @Output()
  basis: SafeStyle = this.sanitizer.bypassSecurityTrustStyle('calc(100% - 4px)');

  constructor(public navCtrl: NavController,private sanitizer: DomSanitizer, public modalCtrl: ModalController) {

  }

  showImgView(url)
  {
    this.modalCtrl.create(PhotoViewerPage, {idx: this.imgUrls.indexOf(url), imgUrls: this.imgUrls}).present();
  }

}
